<template>
	<view class="wap">
		<view class="variety-navigation">
			<view class="variety-text">
				<view class="variety-navigation-icons flex-y-center">
					<view class="flex-y-center" style="margin-right: 10px;" @click="juliChange()">
						<view>距离</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[juliup==true?'arrowup':'arrowdown']">
						</image>
					</view>
					<view class="flex-y-center" style="margin-right: 10px;" @click="jiageChange()">
						<view>价格</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[jiageup==true?'arrowup':'arrowdown']">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="store-list">
				<view class="store-item" v-for="(item,index) in data.data_list" :key="index" @click="storeTap(index)">
					<view class="goods_brand" style="background-color: rgb(255, 215, 5);"
						v-if="item.platform=='meituan'">
						<image src="@/static/img/meituan1.png">
						</image>
						<text class="name">美团</text>
					</view>
					<view class="goods_brand" style="background-color: rgb(33, 149, 255);"
						v-if="item.platform=='eleme'">
						<image src="@/static/img/elm1.png">
						</image>
						<text class="name">饿了么</text>
					</view>
					<view style="padding: 9px 12px;position: relative;overflow: hidden;z-index: 7;background: #fff;">
						<view class="rules-num" v-if="item.activity_count>1">
							<text><span>活动数{{item.activity_count}}</span></text>
						</view>
						<view class="head-item border-bottom info-item">
							<view class="item-left">
								<view class="mask" v-if="item.open_buy=='0'">
									<image src="@/static/img/weizhifu.png" class="mask-img">
									</image>
								</view>
								<view class="mask" v-if="item.stock<=0">
									<image src="@/static/img/out-of-stock.png" class="mask-img">
									</image>
								</view>
								<image class="head-img" :src="item.image">
								</image>
							</view>
							<view class="item-right">
								<view class="item">
									<view class="title">{{item.name}}</view>
								</view>
								<view class="item">
									<view>还剩<text class="stock-text">
											{{item.stock}}</text>份</view>
									<view class="progress">
										<progress :percent="item.percent" activeColor="rgb(255, 150, 42)"
											stroke-width="8" border-radius="16"
											backgroundColor="rgba(255, 150, 42, 0.5)">
										</progress>

									</view>
								</view>
								<view class="item">
									<view class="distance-text">距离：{{item.distance}}</view>
									<view class="time-region">可报名 {{item.open_start}}-{{item.open_end}}</view>
								</view>
							</view>
						</view>
						<view class="head-item border-bottom cashback-item">
							<!-- <view class="icon discount-text">送</view> -->
						<!-- 	<view class="text" style="margin-left:84px ;">会员满<text class="amount">
									{{item.vip_pay_fee}}</text>奖:<text class="amount">
									{{item.vip_cash_back}}</text>
							</view> -->
							<view class="text">满<text class="amount">
									{{item.pay_fee}}</text>奖:<text class="amount">
									{{item.cash_back}}</text>
							</view>
							<!-- <view>
								<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'">
								</image>
								<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'">
								</image>
							</view> -->
						</view>
						<view class="head-item border-bottom address-item">
							<image class="icon" src="@/static/img/address-gray-ico.png">
							</image>
							<view class="address-text">{{item.address}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- <view>
			<view class="bottom-text">我也是有底线的</view>
		</view> -->
		<view v-if="data.no_list" class="bottom-text">暂无数据</view>
		<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
		<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
			加载中...
		</view>

	</view>
</template>

<script>
	import {
		getStoreList,
		getStoreCat,
		getTagInfo
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock: 0,
				juliup: false,
				jiageup: false,
				sort: 0,
				latitude: '',
				longitude: '',
				tag_id: 0,
				kwd: '',
				cat_list: [],
			}
		},

		onLoad(options) {
			this.longitude = uni.getStorageSync('longitude');
			this.latitude = uni.getStorageSync('latitude');
			this.tag_id = options.tag || 0;
			this.kwd = options.kwd || '';
		},
		onShow() {
			this.data = {
				data_list: [],
				no_list: !1,
				no_more: !1,
				current_page: 0,
				loading_more: !0,
			};
			this.loadDataList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		methods: {

			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
				this.sort = 1
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
				this.sort = 2
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				// if (!o.longitude || !o.latitude) {
				// 	return;
				// }
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
						latitude: o.latitude,
						longitude: o.longitude,
						tag_id: o.tag_id,
						juliup: o.juliup ? 1 : 0,
						jiageup: o.jiageup ? 1 : 0,
						category_id: o.cat_id || 0,
						sort: o.sort,
						keyword: o.kwd || '',
					}
					o.lock = 1;
					console.log(o.lock)
					getStoreList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
									o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}

						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			storeTap(index) {
				let this_item = this.data.data_list[index];
				if (!this_item) {
					return;
				}
				if (parseInt(this_item.open_buy) == 0) {
					let time = this_item.open_start + "-" + this_item.open_end;
					uni.showToast({
						icon: 'none',
						title: '未到报名时间，报名时间' + time,
						duration: 2000
					});

				} else if (parseInt(this_item.stock) <= 0) {
					uni.showToast({
						icon: 'none',
						title: '今日名额已抢光',
						duration: 2000
					})
				} else {
					this.distance = this_item.distance;
					uni.navigateTo({
						url: '/pages/details/details?id=' + this_item.store_id
					})
				}

			},
		},
	}
</script>

<style>
	.variety-text {
		padding: 10px 15px;
		color: #afb0b1;
		font-size: 26rpx;
		border-bottom: 1px solid #e7e7e7
	}

	.arrowup {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	.variety-image {
		margin: 0px 5px;
		width: 12px;
		height: 12px
	}

	/* 主题色 */
	.meituan {
		color: #333 !important;
		background-color: #ff8546
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0 40px 9px 14px;
		// padding: 9px 12px;
		position: relative;
		z-index: 8;
		background: #fff;
		/* 信息项 */
		/* 返现项 */
		/* 更多项 */
		/* 地址项 */
		/* 底部项 */
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 5px 0
	}

	.store-list .store-item .rules-num {
		position: absolute;
		background: linear-gradient(270deg, #ec5151 0, #ff5e3c 45%, #ffb15f);
		color: #fff;
		font-size: 9px;
		padding: 2px 14px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 7px;
		right: -15px
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -3px;
		right: -2px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 16px 0 0 16px;
		width: 44px;
		height: 16px;
		text-align: center
	}

	.store-list .store-item .info-item .item-left .mask {
		width: 100%;
		height: 60px;
		border-radius: 8px;
		background-color: rgba(0, 0, 0, .7);
		position: absolute;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .info-item .item-left .mask .mask-img {
		width: 60px;
		height: 30px
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 80px;
		height: 60px;
		display: block;
		border-radius: 10px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 10px;
		width: 100%;
		display: flex;
		flex-flow: column
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
		font-weight: 700
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-weight: 700;
		font-size: 28rpx;
		margin: 0 7px
	}

	.store-list .store-item .info-item .item-right .item .progress {
		width: 123px
	}

	.store-list .store-item .info-item .item-right .item .distance-text {
		color: #bec1c7
	}

	.store-list .store-item .info-item .item-right .item .time-region {
		width: 123px;
		padding: 2px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 2px
	}

	.store-list .store-item .cashback-item {
		justify-content: space-between;
		align-items: center;
		margin-left: 85px;
	}

	.store-list .store-item .cashback-item .icon {
		width: 20px;
		height: 20px
	}

	.store-list .store-item .cashback-item .discount-text {
		background-color: #f96456;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		line-height: 20px;
		font-size: 26rpx
	}

	.store-list .store-item .cashback-item .text {
		color: #333;
		font-size: 24rpx
	}

	.store-list .store-item .more-item {
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .more-item .more-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-right: 7px
	}

	.store-list .store-item .address-item .icon {
		width: 20px;
		height: 20px
	}

	.store-list .store-item .address-item .address-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-left: 7px
	}

	.store-list .store-item .footer-item {
		padding-bottom: 0;
		color: #f96456;
		align-items: center;
		justify-content: center;
		font-size: 28rpx
	}

	.store-list .store-item .goods_brand {
		width: 43px;
		border-radius: 0px 7px 7px 0px;
		position: absolute;
		top: 0px;
		right: -31px;
		z-index: 7;
		height: 100%;
	}

	.store-list .store-item .goods_brand image {
		width: 21px;
		height: 21px;
		margin-top: 9px;
		margin-left: 18px;
	}

	.store-list .store-item .goods_brand .name {
		display: block;
		width: 16px;
		position: absolute;
		top: 38px;
		right: 8px;
		line-height: 1.4em;
		word-wrap: break-word;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
	}
</style>
